<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Guest Book</title>
  <style>
    fieldset {
      border: thin solid #ff0000;
      width: 35%;
    }

    legend {
      font-weight: bold;
      font-size: 125%;
    }

    label.question {
      float: left;
      width: 225px;
      text-align: left;
      font-weight: bold;
    }

    span.question {
      font-weight: bold;
    }

    input,
    textarea,
    select {
      border: thin solid #000;
      padding: 3px;
    }

    #buttons {
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <h1>My Guest Book</h1>
  <form name="gb-form" method="POST" action="URL-to-script">
    <fieldset>
      <legend>Personal Information</legend>
      <p>
        <label class="question" for="the-name">What is your name?</label>
        <input id="the-name" name="the-name" type="text" placeholder="Enter your full name" size="50" required
          autofocus />
      </p>
      <p>
        <label class="question" for="the-emal">What is e-mail address?</label>
        <input id="the-email" name="the-mail" type="email" placeholder="Please use a real one!" size="50" required />
      </p>
    </fieldset>
    <fieldset>
      <legend>Survery Question</legend>
      <p><span class="question">Please check all that apply:</span></p>
      <input id="like-it" type="checkbox" name="some-statements[]" value="I really like your Web site." />
      <label for="like-it">I really like your Web site.</label><br />
      <input id="the-best" type="checkbox" name="some-statements[]" value="It's one of the best sites I've ever seen" />
      <label for="the-best">It's one of the best sites I've ever seen.</label>
      <br />
      <input id="jealous" type="checkbox" name="some-statements[]"
        value="I sure wish my site wish my site looked as god as yours." />
      <label for="jealous">
        I sure wish my site wish my site looked as god as yours.
      </label>
      <br />
      <input id="no-taste" type="checkbox" name="some-statements[]"
        value="I have no taste and I'm pretty dense, so your site didn't do much for me." />
      <label for="no-taste">
        I have no taste and I'm pretty dense, so your site didn't do much for
        me.
      </label>
      <br />
      <p>
        <lable>
          <span class="question">Please rate my site on a scale of 1 (poor) to (awsome):
          </span>
        </lable>
        <input id="choose-scale" type="number" min="0" max="10" step="1" value="5" />
      </p>
      <p>
        <span class="question">
          Please choose the one thing your love best about my web site:
        </span>
        <br />
        <input id="the-picture" type="radio" name="best-thing" value="me" />
        <label for="the-picture">That amazing picture of you</label><br />
        <input id="the-cats" type="radio" name="best-thing" value="cats" />
        <label for="the-cats">All the cat photos, of course</label><br />
        <input id="the-story" type="radio" name="best-thing" value="childhood story" />
        <label for="the-story">
          The inspiring recap of your suburban childhood
        </label>
        <br />
        <input id="the-treasures" type="radio" name="best-thing" value="Elvis treaures" />
        <label for="the-treasures">
          The detailed list of all your Elvis memorabilia
        </label>
        <br />
      </p>
      <p>
        <label for=""><span class="question">How can I improve my web site</span></label>
        <br />
        <select name="how-impove" id="how-improve">
          <option value="You can't. It couldn't be better.">
            You can't. It couldn't be better.
          </option>
          <option value="More about the cats.">More about the cats.</option>
          <option value="More about Elvis.">More about Elvis.</option>
        </select>
      </p>
    </fieldset>
    <fieldset>
      <legend>Free for all</legend>
      <p>
        <label for="message">
          <span class="question">Feel free to send more praise, gift offers, etc.:</span>
        </label>
        <textarea name="message" id="message" cols="55" rows="7"></textarea>
      </p>
    </fieldset>
    <div>
      <input type="submit" value="Click Here to Submit!" />
      <input type="reset" value="Erase and Start Over" />
    </div>
  </form>
</body>
</html>
